<template>
    <el-form :model="remarkForm" ref="remarkForm">
        <el-form-item prop="remark">
            <vue-editor
                v-model="remarkForm.remark"
                :editor-toolbar="customToolbar"
            ></vue-editor>
        </el-form-item>
        <div class="dialog-footer">
            <el-button size="small" @click="resetRemarkDialog">重 置</el-button>
            <el-button
                size="small"
                type="primary"
                @click="confirmRemark"
                :loading="editBtnLoading"
                >确 定</el-button
            >
        </div>
    </el-form>
</template>

<script>
import { handleConfirm } from "@/utils/messageBox";
import { equipment } from "@/api/factuer";

import { VueEditor } from "vue2-editor";
export default {
    components: {
        VueEditor,
    },
    props: {
        currentRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            remarkForm: {
                id: "",
                remark: "",
            },
            editBtnLoading: false,

            customToolbar: [
                ["bold", "italic", "underline", "strike"],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ color: [] }, { background: [] }],
                [{ align: [] }],
            ],
        };
    },
    watch: {
        currentRow: {
            handler(val) {
                let { id, remark } = val;
                this.remarkForm = { id, remark };
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        resetRemarkDialog() {
            this.remarkForm = {
                id: this.currentRow.id,
                remark: "",
            };
        },
        confirmRemark() {
            handleConfirm(
                `确定要${this.remarkForm.remark ? "编辑" : "清空"}备注信息吗？`,
                "warning",
                "提示"
            )
                .then((res) => {
                    this.doEdit();
                })
                .catch((err) => {});
        },
        doEdit() {
            this.editBtnLoading = true;
            let formData = new FormData();
            formData.append("remark", this.remarkForm.remark);
            equipment(
                `/update/remark/${this.remarkForm.id}`,
                "post",
                formData,
                1
            )
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success(res.message);
                        this.$emit("closeRemarkDialog");
                        this.resetRemarkDialog();
                    }
                })
                .finally(() => {
                    this.editBtnLoading = false;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
    text-align: right;
}
::v-deep .ql-editor{
    min-height: 260px;
    max-height: 60vh;
    overflow-y: auto;
}
::v-deep .quillWrapper .ql-snow.ql-toolbar{
    padding: 8px 0 0;
}

::v-deep .ql-background,::v-deep .ql-snow .ql-picker{
    top: -5px;
}
::v-deep .ql-picker:not(.ql-background){
    top: -3px;
}
::v-deep .quillWrapper .ql-toolbar.ql-snow .ql-formats:last-child{
    margin-top: -3px;
}
</style>
